<template>
	<div class="component-nav">
		<ul>
			<li :class="{ action: item.path == url }" v-for="item in menuList" @click="toPage(item.path)">
				<span>{{ item.name }}</span>
			</li>
		</ul>
	</div>
</template>

<script setup>
import { routerArr } from '@admin/router/index';
import { useRouter, useRoute, onBeforeRouteUpdate } from 'vue-router';
import { ref, reactive, watch } from 'vue';

const router = useRouter();
const route = useRoute();
const url = ref('');
const menuList = [];

routerArr.forEach((x, indexX) => {
	x.children.forEach((y, indexY) => {
		menuList.push(y);
	});
});

setTimeout(function() {
	url.value = route.path;
}, 100);

let toPage = page => {
	url.value = page;
	router.push(page);
};
</script>

<style lang="scss" scoped>
@import '@admin/assets/css/common';

.component-nav {
	width: 100%;
	height: 100%;

	ul {
		li {
			height: rem(60);
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
		}

		.action {
			background: rgba(0, 0, 0, 0.1);

			span {
				color: $tc;
			}
		}
	}
}
</style>
